<template>
	<gracePage :customHeader="false">
		<!-- 页面主体 -->
		<view slot="gBody">
			<graceHeader background="#3187D5">
				<view class="grace-header-body" style="background:#3187D5;">
					<view class="grace-rows">
						<view class="grace-header-icons grace-icons icon-arrow-left grace-white" @tap="myback"></view>
						<view class="grace-flex-center" style="width: 750rpx;">
							<graceNavBar lineHeight='70rpx' :size="200" color='#FFFFFF' activeColor='#FFFFFF' activeLineBg='#FFFFFF'
							 activeLineWidth='85rpx' :items="tabs" :currentIndex="currentIndex" @change="navChange"></graceNavBar>
						</view>
					</view>
				</view>
			</graceHeader>
			<swiper style="width: 750rpx;" :style="{height:height}" class="swiper" :current="currentIndex" @change="swiperChange">
				<swiper-item class="demo" v-for="(item1, index1) in cards_list" :key="index1">
					<scroll-view class="grace-scroll-y" scroll-y :style="{height:height}">
						<!-- <text class="demo-txt">{{item}}</text> -->
						<view v-for="(item2,index2) in item1.data" :key="index2">
							<view style="margin: 10rpx auto; width:670rpx;height:240rpx;box-shadow:0px 0px 15rpx 0px rgba(131,131,131,0.3);border-radius:10rpx;"
							 :style="{background:item2.bankinfo.back_color== null? 'rgba(0, 145, 116, 1)':item2.bankinfo.back_color}">
								<view :style="{backgroundImage: 'url('+item2.bankinfo.back_img+')'}" style="width:670rpx;height:240rpx; background-size: 288rpx 166rpx;background-repeat: no-repeat;background-position-x: 357rpx;background-position-y: 74rpx;">
									<view style="margin-left:30rpx;position: relative;top: 30rpx;">
										<view class="grace-rows">
											<image :src="item2.bankinfo.bank_icon_url" style="width: 50rpx;height: 50rpx;"></image>
											<view class="grace-columns" style="margin-left: 22rpx;width: 280rpx;">
												<text style="font-size:30rpx;font-weight:400;color:rgba(255,255,255,1);">{{ item2.name }}</text>
												<image :src=" item2.types ==='储蓄卡' ? '../../static/chuxuka.png' : '../../static/xinyongka.png'" style="width: 60rpx;height: 22rpx;"></image>
											</view>
											<view class="grace-rows" style="">
												<button @tap="modify(item2.id,item2.types)" style="width:120rpx;height:50rpx;background:rgba(255,255,255,1);border-radius:20rpx;font-size:22rpx;font-weight:500;line-height: 50rpx;"
												 :style="{color:item2.bankinfo.back_color}">修改</button>
												<button @tap="showDialog3(item2.types,item2.id)" style="margin-left: 20rpx; width:120rpx;height:50rpx;background:rgba(255,255,255,1);border-radius:20rpx;font-size:22rpx;font-weight:500;line-height: 50rpx;"
												 :style="{color:item2.bankinfo.back_color}">解绑</button>
											</view>
										</view>
										<view style="margin-top: 15rpx;">
											<text style="margin-left: 40rpx;font-size:40rpx;font-weight:400;color:rgba(255,255,255,1);">{{ item2.bc_bank_number.bc_bank_number.substring(0,4) }}</text>
											<text style="margin-left: 50rpx;font-size:40rpx;font-weight:400;color:rgba(255,255,255,1);">{{ item2.bc_bank_number.bc_bank_number.substring(4,8) }}</text>
											<text style="margin-left: 50rpx;font-size:40rpx;font-weight:400;color:rgba(255,255,255,1);">{{ item2.bc_bank_number.bc_bank_number.substring(8,12) }}</text>
											<text style="margin-left: 50rpx;font-size:40rpx;font-weight:400;color:rgba(255,255,255,1);">{{ item2.bc_bank_number.bc_bank_number.substring(12,item2.bc_bank_number.bc_bank_number.length) }}</text>
										</view>
										<view style="margin-top: 19rpx;margin-left: 80rpx;">
											<text style="font-size:26rpx;font-weight:400;color:rgba(255,255,255,1);">{{ item2.billing_day!=null&&item2.billing_day!='' ? '账单日：'+item2.billing_day+'日': '' }}</text>
											<text style="margin-left: 180rpx; font-size:26rpx;font-weight:400;color:rgba(255,255,255,1);">{{ item2.repayment_date!=null&&item2.repayment_date!='' ? '还款日：'+item2.repayment_date+'日': '' }}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view>
							<button :style="{background:button_color}" class="button_color" @tap="add_card(item1.name)">+ 添加{{ item1.name }}</button>
						</view>
						<view style="height: 100rpx;"></view>
					</scroll-view>
				</swiper-item>
			</swiper>

			<graceDialog :isTitle="false" :show="show3" :isCloseBtn="false" width='500rpx'>
				<view class="content2" slot="content" style="text-align: center;">
					<text style="font-size: 26rpx;">确认与该银行卡解绑</text></br>
				</view>
				<view slot="btns" class="grace-space-between">
					<text class="grace-dialog-buttons" @tap="closeDialog3">关闭</text>
					<text class="grace-dialog-buttons grace-blue" @tap="confirm3">确认</text>
				</view>
			</graceDialog>
			<ourLoading isFullScreen active text="加载中..." v-if="loadings" />
		</view>
	</gracePage>
</template>

<script>
	import graceDialog from '../../graceUI/components/graceDialog.vue';
	import graceHeader from '../../graceUI/components/graceHeader.vue';
	import gracePage from "../../graceUI/components/gracePage.vue";
	import graceNavBar from "../../graceUI/components/graceNavBar.vue";
	export default {
		data() {
			return {
				button_color:'',//按钮颜色
				currentIndex: 0,
				height: '',
				tabs: ['储蓄卡', '信用卡'],
				cards: [],
				bc_type: '',
				bc_id: '',
				show3: false,
				loadings: false, // 遮罩显示判断
				// bc_bank_number_c:"6313******1511"
			}
		},
		onShow: function() {
			this.shuaxin();
			this.button_color = uni.getStorageSync('button_color');
		},
		// onLoad:function(){
		// 	this.shuaxin();
		// },
		methods: {
			// 显示验证码输入框
			showDialog3: function(bc_type, bc_id) {
				this.bc_type = bc_type;
				this.bc_id = bc_id;
				this.show3 = true;
			},
			// 关闭输入框
			closeDialog3: function() {
				this.show3 = false;
			},
			// 验证码输入框选择了确认
			confirm3: function() {
				this.shanchu();
				this.closeDialog3();
				this.bc_type = '';
				this.bc_id = '';
			},
			// 返回上一页
			myback() {
				uni.switchTab({
					url: '/pages/index/index1'
				});
			},
			// 修改银行卡事件
			modify(id,types){
				console.log(id,types);
				if(types == '储蓄卡'){
					uni.navigateTo({
						url: '/pages/card/modify_savings_card?id=' + id
					})
				}else{
					uni.navigateTo({
						url: '/pages/card/modify_credit_card?id=' + id
					})
				}
			},
			// 删除银行卡事件
			shanchu() {
				var vm = this;
				var url = '';
				if (this.bc_type === '储蓄卡') {
					url = 'api/cardapi/delete_savings_card';
				} else {
					url = 'api/cardapi/delete_credit_card'
				};
				console.log(this.bc_id);
				vm.myPost(
					url, {
						id: this.bc_id
					},function(res) {
						if(res.code == 200){
							uni.showToast({
								title: res.msg,
								icon:'none'
							})
							vm.shuaxin();
						}
					}
				)
			},
			navChange: function(e) {
				this.currentIndex = e;
			},
			swiperChange: function(e) {
				var index = e.detail.current;
				this.currentIndex = index;
				console.log(e);
			},
			// 添加银行卡页面跳转事件
			add_card(name) {
				if (name === '储蓄卡') {
					uni.navigateTo({
						url:'/pages/card/add_savings_card'
					})
				} else if (name === '信用卡') {
					uni.navigateTo({
						url:'/pages/card/add_credit_card1?types=1,2,3,4,5'
					})
				}
			},
			// 获取用户银行卡列表数据
			shuaxin() {
				var vm = this;
				vm.cards = [];
				this.height = (this.sys.safeArea.height - 48) + 'px';
				vm.loadings = true
				this.myPost(
					'/api/cardapi/get_card_list', {
						type: '储蓄卡'
					},
					function(res) {
						console.log(res);
						setTimeout(function(){
							vm.loadings = false
						},500)
						if (res.code == 200) {
							vm.cards.push({
								data: res.data,
								name: '储蓄卡'
							})
						}
						vm.myPost(
							'/api/cardapi/get_card_list', {
								type: '信用卡'
							},
							function(res) {
								if (res.code == 200) {
									vm.cards.push({
										data: res.data,
										name: '信用卡'
									})
								}

							}
						)
					},function(){
						setTimeout(function(){
							vm.loadings = false
						},500)
					}
				)
				console.log(1);
			}
		},
		components: {
			gracePage,
			graceNavBar,
			graceHeader,
			graceDialog
		},
		computed: {
			cards_list() {
				return this.cards;
			}
		}
	}
</script>

<style>
	.content2 {
		padding: 30rpx;
		line-height: 50rpx;
	}

	.grace-dialog-buttons {
		width: 700rpx;
		line-height: 88rpx;
		height: 88rpx;
		display: block;
		overflow: hidden;
		text-align: center;
		font-size: 26rpx;
		color: #999999;
	}
	.button_color{
		width:750rpx;height:100rpx;background:#3187D5;font-size:34rpx;color:rgba(255,255,255,1);border-radius: 0;position:fixed;bottom: calc( var(--window-bottom) - 0px);z-index: 999;
	}
</style>
